<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            position: absolute;
        }
    </style>
    <script>
        window.onload=function () {
            //使div可以根据不同的方向键朝不同的方向移动
            //按左键 向左移动 ;按右键 向右移动;
            // 按上键 向上移动; 按下键 向下移动
            //定义一个变量 表示移动的速度
            var speed=10;//可以修改
            var dir=0;
            // 开启一个定时器 来控制div的移动
            setInterval(function () {
                switch(dir){
                    case 37:
                        // alert("向左按键");
                        box1.style.left=box1.offsetLeft-speed+"px";
                        break;
                    case 39:
                        box1.style.left=box1.offsetLeft+speed+"px";
                        break;
                    case 38:
                        // alert("向上按键");
                        box1.style.top=box1.offsetTop-speed+"px";
                        break;
                    case 40:
                        box1.style.top=box1.offsetTop+speed+"px";
                        break;
                }
            },50);

            var box1=document.getElementById("box1");
            document.onkeydown=function (event) {
                event=event||window.event;

                // console.log(event.keyCode);
                // 向左event.keyCode 返回37
                // 向上event.keyCode 返回38
                // 向右event.keyCode 返回39
                // 向下event.keyCode 返回40
                //当用户按ctrl键 速度加快
                if (event.ctrlKey){
                    var speed=90;
                }
                //使dir等于按键的值
                dir=event.keyCode;
            };
            //当按键松开时，div不再移动
            document.onkeyup=function () {
                //设置方向为0
            dir=0;
            }
        }
    </script>
</head>
<body>
<script>
    /*本页面的思想是 让onkeydown 控制方向   定时器控制速度 二者分开
    *
    *
    * */
</script>
<div id="box1"></div>
</body>
</html>